<%
layout("layout.html"){
%>
<script src="${ctxPath}/js/net.js"></script>
<script>
    $(document).ready(function(){
        var $actionSheet = $('#actionSheet');
        var $mask = $('#mask');
        var $actionSheetCancel = $('#actionSheetCancel');
        var money = null;

        function hide() {
            $actionSheet.removeClass('weui-actionsheet_toggle');
            $mask.fadeOut(200);
        }
        
        $('#showActionSheet').click(function () {
            if (${oilCard.dayTimes} >= 10) {
                alert('使用次数已经达到10次');
                return;
            }
            $actionSheet.addClass('weui-actionsheet_toggle');
            $mask.fadeIn(200);
        });

        $actionSheetCancel.click(function () {
            hide();
        });
        
        $mask.click(function () {
            hide();
        });

        $('#showDeleteButton').click(function() {
            $('#deleteDialog').fadeIn(200);
        });

        $('#deleteButton').click(function () {
            $('#deleteDialog').fadeOut(200);
            net()
                .url('/api/oilCards/${oilCard.id}')
                .success(function (response) {
                    if (response.code == 0) {
                        window.location.href = document.referrer;
                    } else {
                        alert(response.message);
                    }
                })
                .error(function (err) {
                    alert('请求失败');
                })
                .delete();

        });

        $('#hideDeleteDialog').click(function() {
            $('#deleteDialog').fadeOut(200);
        });

        $('#confirmButton').click(function () {
            $('#showActionSheet').attr('disabled', true);
            $('#rechargeDialog').fadeOut(200);
            $('#loading').removeAttr('style', '');
            var recharge = {
                money: money,
                card: {
                    id: ${oilCard.id}
                }
            };
            net()
                .url('${ctxPath}/api/oilRecharges')
                .data(recharge)
                .success(function (response) {
                    if (response.code == 0) {
                        showToast();
                        setTimeout(function () {
                            window.history.back();
                        }, 500)

                    } else {
                        alert(response.message);
                    }
                })
                .error(function (err) {
                    alert('网络错误');
                })
                .post();
        });

        $('.rechargeItem').click(function () {
            money = $(this).text() * 100;
            hide();
            $('#rechargeText').text($(this).text() + '元');
            $('#rechargeDialog').fadeIn(200);
        });

        $('#cancelDialog').click(function () {
            $('#rechargeDialog').fadeOut(200);
        });
    });
</script>
<div class="page__hd">
    <h1 class="page__title">油卡详情</h1>
</div>
<div class="page__bd">
    <div class="weui-cells weui-cells_form">
        <a href="${ctxPath}/oilRecharge?id=${oilCard.id}" class="weui-cell weui-cell_access">
            <div class="weui-cell__bd">
                <label class="weui-label">充值记录</label>
            </div>
            <div class="weui-cell__ft"></div>
        </a>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">卡号</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入加油卡卡号" value="${oilCard.number}" disabled/>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">今日充值次数</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" value="${oilCard.dayTimes}" disabled/>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">持卡人</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入持卡人姓名" value="${oilCard.username}" disabled/>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">持卡人手机</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入持卡人手机" value="${oilCard.phone}" disabled/>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">卡类型</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入持卡人姓名" value="${oilCard.type == 'ZSY' ? '中石油' : '中石化'}" disabled/>
            </div>
        </div>
        <div class="weui-btn-area">
            <a href="javascript:" class="weui-btn weui-btn_primary" id="showActionSheet">
                <i id="loading" style="display:none;" class="weui-loading"></i>
                充值
            </a>
            <a href="javascript:" class="weui-btn weui-btn_warn" id="showDeleteButton">删除</a>
        </div>
    </div>
</div>
<div>
    <div class="weui-mask" id="mask" style="display: none"></div>
    <div class="weui-actionsheet" id="actionSheet">
        <div class="weui-actionsheet__title">
            <p class="weui-actionsheet__title-text">充值金额</p>
        </div>
        <div class="weui-actionsheet__menu">
            <div class="weui-actionsheet__cell rechargeItem">500</div>
            <div class="weui-actionsheet__cell rechargeItem">1000</div>
        </div>
        <div class="weui-actionsheet__action">
            <div class="weui-actionsheet__cell" id="actionSheetCancel">取消</div>
        </div>
    </div>
</div>
<div class="js_dialog" id="deleteDialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">删除油卡</strong></div>
        <div class="weui-dialog__bd">是否确认删除？</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" id="deleteButton">删除</a>
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="hideDeleteDialog">取消</a>
        </div>
    </div>
</div>
<div class="js_dialog" id="rechargeDialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">油卡充值</strong></div>
        <div class="weui-dialog__bd" id="rechargeText">充值</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" id="confirmButton">确定</a>
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="cancelDialog">取消</a>
        </div>
    </div>
</div>
<% } %>